var new_pie_1 = function (pxdata, pydata) {
  var mychart = echarts.init(document.getElementById('new_pie_1'));
  var color_arr = ['#3196fa', '#00ffc6', '#00cd60', '#ffa800'];
  var name_arr = pxdata || S_mock.xdata(1, 12, '项目');
  var ydata = pydata || S_mock.array(name_arr.length, 100, 200);
  var seri_data = [];
  var dw = '项';
  for (const key in name_arr) {
    if (key == 0) {
      seri_data.push({
        name: name_arr[key],
        value: ydata[key],
        label: {
          show: true
        }
      })
    } else {
      seri_data.push({
        name: name_arr[key],
        value: ydata[key]
      })
    }
  }
  var option = {
    color: color_arr,
    title: {
      show: false,
      left: 'center',
      top: 'top',
      text: '标题',
      textStyle: {
        fontWeight: 'normal',
        color: '#facc14',
      },
    },
    tooltip: {
      trigger: 'item',
      formatter: "{b}: {c} ({d}%)"
    },
    legend: {
      type: 'scroll',
      y: 'center',
      right: '4%',
      id: 'la',
      // itemWidth: getSize(0.24),
      // itemHeight: getSize(0.14),
      // itemGap: getSize(0.2),
      icon: 'roundRect',
      formatter: function (para) {
        var str = '{a|' + para + '} {b|';
        str += ydata[name_arr.indexOf(para)] + '}  {c|' + dw + '}';
        if (para = '其他') {
          str = str.replace(/其他/, '其他');
        }
        return str;
      },
      textStyle: {
        padding: [getSize(0.1), getSize(0.2), 0, 0],
        rich: {
          a: {
            fontSize: getSize(0.3),
            color: '#fff'
          },
          b: {
            fontSize: getSize(0.3),
            color: '#facc14'
          },
          c: {
            fontSize: getSize(0.24),
            color: '#fff'
          }
        }
      },
      orient: 'vertical', //horizontal 水平 vertical 垂直
      data: name_arr
    },
    series: [{
      name: '',
      type: 'pie',
      clockWise: false,
      center: ['30%', '50%'],
      radius: ['60%', '75%'],
      startAngle: 90,
      label: {
        show: false,
        fontSize: 16,
        fontFamily: 'DIN',
        position: 'center',
        formatter: '{a|' + getArrSum(ydata) + '}\n{b|总计}',
        rich: {
          a: {
            fontSize: getSize(0.44),
            color: '#FFA800'
          },
          b: {
            fontSize: getSize(0.24),
            color: '#fff'
          }
        }
      },
      labelLine: {
        show: true
      },
      data: seri_data
    }]
  }
  mychart.setOption(option);

  function suto_leg(dom, pfix_num, pleng_id) {
    var fix_num = pfix_num || 4;
    var leng_id = pleng_id || 'la';
    var cue_leg_idx = 0;
    $('#' + dom).bind('mousewheel', function (event, delta) {
      var dir = delta > 0 ? 'Up' : 'Down';
      if (dir == 'Up') {
        // console.log('向上');
        if (cue_leg_idx == 0) {
          cue_leg_idx = 0;
        } else {
          cue_leg_idx = cue_leg_idx - 1
        }
        mychart.dispatchAction({
          type: 'legendScroll',
          scrollDataIndex: cue_leg_idx,
          legendId: 'la'
        })
      } else {
        // console.log('向下');
        if (cue_leg_idx >= name_arr.length - fix_num) {
          cue_leg_idx = name_arr.length;
        } else {
          cue_leg_idx = cue_leg_idx + 1
          // console.log(cue_leg_idx);
        }
        mychart.dispatchAction({
          type: 'legendScroll',
          scrollDataIndex: cue_leg_idx,
          legendId: leng_id
        })
      }
      return false;
    });

  }
  suto_leg('new_pie_1')

};
var new_pie_2 = function (pxdata, pydata) {
  var colorArr = ['#FFA800', '#3196FA'];
  var nameArr = pxdata || ['项目1', '项目2', '项目3', '项目4'];
  var valueArr = pydata || S_mock.array(nameArr.length, 100, 200);
  var dataArr = [];
  var legendArr = [];
  for (var i = 0; i < nameArr.length; i++) {
    dataArr.push({
      name: nameArr[i],
      value: valueArr[i]
    });
    legendArr.push({
      icon: 'rect',
      name: nameArr[i],
    });
  }
  var mychart = echarts.init(document.getElementById('new_pie_2'));
  var option = {
    color: colorArr,
    tooltip: {
      trigger: 'item',
      // formatter: "{a} <br/>{b}: {c} ({d}元)"
    },
    legend: {
      y: 'center',
      right: '10%',
      itemWidth: getSize(0.4),
      itemHeight: getSize(0.24),
      // itemGap: getSize(0.1),
      textStyle: {
        padding: [getSize(0.1), 0, 0, 0],
        rich: {
          a: {
            fontSize: getSize(0.28),
            color: '#fff'
          },
          b: {
            fontSize: getSize(0.24),
            color: '#facc14'
          },
          c: {
            fontSize: getSize(0.24),
            color: '#facc14'
          }
        }
      },
      formatter: function (para) {
        var str = '{a|' + para + '} {b|';
        str += valueArr[nameArr.indexOf(para)] + '}  {c|元}';
        if (para = '其他') {
          str = str.replace(/其他/, '其他       ');
        }
        return str;
      },
      orient: 'vertical',
      data: legendArr
    },
    series: [{
      name: '',
      type: 'pie',
      clockWise: false,
      center: ['40%', '50%'],
      radius: ['40%', '60%'],
      startAngle: 90,
      // avoidLabelOverlap: false,
      itemStyle: {
        normal: {
          label: {
            show: true,
            fontSize: getSize(0.24),
            position:'inner',
            align: 'center',
            color:'#333',
             backgroundColor: "#fff",
              padding: [getSize(0.2), getSize(0.22), getSize(0.2), getSize(0.22)],
              borderRadius: 30,
              shadowColor: "#ccc",
              shadowBlur: 10,
            // padding: [22, 5],
            // borderRadius: getSize(1.5),
            // backgroundColor: '#fff',
            formatter: '{d}%',
          },
          labelLine: {
            show: false
          }
        }
      },
      data: dataArr,
      // roundCap: 2,
    }]
  }
  mychart.setOption(option);
}